<template>
	<view class="ss">
		<view class="content">
		<view class="sahngpintupian">
			<button @click="takePhoto">拍照上传</button>
			<image v-if="imageUrl" :src="imageUrl" mode="aspectFit"></image>
		</view>
		<view class="example">
						<!-- 基础表单校验 -->
						<uni-forms ref="valiForm" :rules="rules" :modelValue="xx">
							<uni-forms-item label="商品名称" label-width="80px" required name="sname">
								<uni-easyinput v-model="xx.sname" placeholder="请输入" />
							</uni-forms-item>
							<uni-forms-item label="商品品种"  label-width="80px" required name="varietys">
								<uni-easyinput v-model="xx.varietys" placeholder="请输入" />
							</uni-forms-item>
							
							<uni-forms-item label="商品分类"   label-width="80px"required name="stype">
								<uni-data-select
								        v-model="value"
								        :localdata="range"
								        @change="change"
								      ></uni-data-select>
							</uni-forms-item>
							<uni-forms-item label="商品单位" label-width="80px" required name="units">
								<uni-data-select
								        v-model="pinzhong"
								        :localdata="pinrange"
								        @change="change"
								      ></uni-data-select>
							</uni-forms-item>
							<uni-forms-item label="商品简介" label-width="80px" required name="introduces">
								<uni-easyinput v-model="xx.introduces" placeholder="请输入" />
							</uni-forms-item>
						</uni-forms>
						
					</view>
		<view>
			<button type="primary" @click="submit('valiForm')">提交</button>
		</view>	
		</view>
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					xx:{
						sname:'',
						units:'',
						stype:'',
						varietys:'',
						introduces:''
					},
					value:'',
					range:[
						{value:0,text:'斤'},
						{value:1,text:'公斤'},
						{value:2,text:'盒'},
					],
					pinzhong:'',
					pinrange:[
						{value:1,text:'牛肉类'},
						{value:2,text:'羊肉类'},
						{value:3,text:'猪肉类'},
						{value:4,text:'鸭肉类'},
						{value:5,text:'鸡肉类'},
					],
					
					// 校验表单数据
					valiFormData: {
						name: '',
						address: '',
						addressA: '',
						phone:'',
						person:''
					},
					// 校验规则
					rules: {
						sname: {
							rules: [{
								required: true,
								errorMessage: '商品名称不能为空'
							}]
						},
						units: {
							rules: [{
								required: true,
								errorMessage: '商品单位不能为空'
							}]
						},
						stype: {
							rules: [{
								required: true,
								errorMessage: '商品分类不能为空'
							}]
						},
						varietys: {
							rules: [{
								required: true,
								errorMessage: '商品品种不能为空'
							}]
						},
						introduces: {
							rules: [{
								required: true,
								errorMessage: '商品简介不能为空'
							}]
						}
					}
				}
			},
	
	
			methods: {
				onClickItem(e) {
					console.log(e);
					this.current = e.currentIndex
				},
				add() {
					this.dynamicLists.push({
						label: '域名',
						rules: [{
							'required': true,
							errorMessage: '域名项必填'
						}],
						id: Date.now()
					})
				},
				del(id) {
					let index = this.dynamicLists.findIndex(v => v.id === id)
					this.dynamicLists.splice(index, 1)
				},
				submit(ref) {
					this.$refs[ref].validate().then(res => {
						console.log('success', res);
						uni.navigateTo({
							url:'/pages/homepage/homepage'
						})
					}).catch(err => {
						console.log('err', err);
					})
				},
			}
		}
</script>

<style>
	.ss{
		background-color: #FFFFFF;
		width: 100%;
		height: 100vh;
		border: 2rpx solid black;
		display: grid;
		place-items: center;
		
	}
	.content{
		width: 80%;
	}
	.sahngpintupian {
		border: 2rpx solid black;
	  text-align: center;
	  padding: 20px;
	}
	
	button {
	  margin-bottom: 20px;
	}
	
	image {
	  width: 100%;
	  max-width: 300px;
	  border-radius: 8px;
	}
	.uni-mt-5{
		background-color: #F5F6F8;
	}
</style>
